<template>
	<view class="chat-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="room-name">喃喃的直播间</text>
			<text class="viewer-count">2.2万人观看</text>
		</view>

		<!-- 聊天消息列表 -->
		<scroll-view class="message-list" scroll-y :scroll-top="scrollTop" scroll-with-animation
			:style="{height: listHeight + 'px'}">
			<view v-for="(msg, index) in messages" :key="index" class="message-wrap"
				:class="{'user-msg': msg.sender === 'user', 'other-msg': msg.sender !== 'user'}">
				<view class="message-bubble">{{ msg.content }}</view>
			</view>
		</scroll-view>

		<!-- 底部输入区域 -->
		<view class="input-container">
			<view class="func-buttons">
				<button class="func-btn share-btn">分享</button>
				<button class="func-btn more-btn" @click="showMoreModal = true">更多</button>
			</view>
			<view class="send-btn" @click="handleSend">结束</view>
		</view>

		<!-- 更多功能弹窗 -->
		<view class="modal-mask" v-if="showMoreModal" @click="showMoreModal = false">
			<view class="modal-content" @click.stop>
				<view class="modal-title">更多</view>
				<view class="modal-grid">
					<view class="grid-item" @click="handleComment">
						<image class="grid-icon" src="/static/broadcast/Frame(4).png"></image>
						<text class="grid-text">评论</text>
					</view>
					<view class="grid-item" @click="flipCamera">
						<image class="grid-icon" src="/static/broadcast/Frame(3).png"></image>
						<text class="grid-text">镜头翻转</text>
					</view>
					<view class="grid-item" @click="pauseLive">
						<image class="grid-icon" src="/static/broadcast/Frame(1).png"></image>
						<text class="grid-text">暂停直播</text>
					</view>
					<view class="grid-item" @click="changeQuality">
						<image class="grid-icon" src="/static/broadcast/Frame(2).png"></image>
						<text class="grid-text">清晰度</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂停确认弹框 -->
		<view class="center-confirm-modal" v-if="showPauseModal">
			<view class="center-confirm-content">
				<view class="center-confirm-title">暂停直播</view>
				<view class="center-confirm-text">
					暂停直播后，观众无法接收画面和声音，
					<br />
					最多暂停5分钟，超时直播将自动结束。
				</view>
				<view class="center-confirm-buttons">
					<button class="center-confirm-btn center-cancel-btn" @click="showPauseModal = false">取消</button>
					<button class="center-confirm-btn center-ok-btn" @click="confirmPause">确定</button>
				</view>
			</view>
		</view>

		<!-- 结束确认弹框 -->
		<view class="center-confirm-modal" v-if="showPauseend">
			<view class="center-confirm-content">
				<view class="center-confirm-title">关播提醒</view>
				<view class="center-confirm-text">
					确定结束直播？
				</view>
				<view class="center-confirm-buttons">
					<button class="center-confirm-btn center-cancel-btn" @click="showPauseend = false">取消</button>
					<button class="center-confirm-btn center-ok-btn" @click="confirmEnd">确定</button>
				</view>
			</view>
		</view>

		<!-- 暂停状态遮罩层 -->
		<view class="pause-overlay" v-if="isLivePaused">
			<view class="pause-content">
				<text class="pause-text">声音和画面已暂停</text>
				<text class="countdown">{{ countdownText }}</text>
				<text class="hint-text">后将自动关闭直播</text>
				<button class="resume-btn" @click="resumeLive">继续直播</button>
			</view>
		</view>

		<!-- 直播结束统计弹窗 -->
		<view class="end-live-modal" v-if="showEndStats">
			<view class="blur-background"></view>
			<view class="stats-container">
				<view class="stats-header">直播已结束</view>
				<view class="stats-duration">直播时长：02:00:00</view>

				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-value">4658</text>
						<text class="stat-label">封面曝光</text>
					</view>
					<view class="gang">
						|
					</view>
					<view class="stat-item">
						<text class="stat-value">6783</text>
						<text class="stat-label">观看人数</text>
					</view>
					<view class="gang">
						|
					</view>
					<view class="stat-item">
						<text class="stat-value">345</text>
						<text class="stat-label">互动人数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">69</text>
						<text class="stat-label">新增粉丝</text>
					</view>
					<view class="gang">
						|
					</view>
					<view class="stat-item">
						<text class="stat-value">9687</text>
						<text class="stat-label">预约人数</text>
					</view>
				</view>

				<view class="action-buttons">
					<view style="display: flex;flex-direction: column;">
						<view class="action-btn">
							<image src="/static/Frame@2x(2).png" mode="aspectFill"
								style="width: 40rpx;height: 40rpx;margin-right: 20rpx;">
							</image>
							<text> 直播预告</text>
						</view>
						<text class="footer-text">创建直播预告，增加播放助力直播流量</text>
					</view>

					<button class="create-btn" @click="showCreateModal = true">创建</button>
				</view>

				<view class="action-buttons">
					<view style="display: flex;flex-direction: column;">
						<view class="action-btn">
							<image src="/static/Frame@3x(12).png" mode="aspectFill"
								style="width: 40rpx;height: 40rpx;margin-right: 20rpx;">
							</image>
							<text> 直播回放</text>
						</view>
						<text class="footer-text">公开这场直播闭幕，让更多的粉丝看到</text>
					</view>

					<button class="create-btn">设为公开</button>
				</view>
			</view>
		</view>

		<!-- 创建预告弹窗 -->
		<notice :visible="showCreateModal" @close="showCreateModal = false" @create="handleCreateNotice" />
	</view>
</template>

<script>
	import notice from '@/pages/notice/notice.vue'
	export default {
		components: {
			notice
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputText: '',
				showCreateModal: false,
				messages: [{
						content: '欢迎来到我的直播间！',
						sender: 'other'
					},
					{
						content: '大家好！',
						sender: 'user'
					}
				],
				scrollTop: 0,
				listHeight: 0,
				showMoreModal: false,
				showPauseModal: false,
				showPauseend: false,
				isLivePaused: false,
				remainingTime: 300, // 5分钟 = 300秒
				countdownTimer: null,
				countdownText: '05:00',
				showEndStats: false
			};
		},
		mounted() {
			this.calculateListHeight();
			uni.onWindowResize(() => {
				this.calculateListHeight();
			});
		},
		methods: {
			calculateListHeight() {
				const systemInfo = uni.getSystemInfoSync();
				const query = uni.createSelectorQuery().in(this);
				query.select('.header').boundingClientRect();
				query.select('.input-container').boundingClientRect();
				query.exec(res => {
					const headerHeight = res[0]?.height || 0;
					const inputHeight = res[1]?.height || 0;
					this.listHeight = systemInfo.windowHeight - headerHeight - inputHeight;
					this.scrollToBottom();
				});
			},
			handleCreateNotice(data) {
				const newNotice = {
					time: data.time || this.getCurrentTimeString(), // 使用标准格式
					title: data.title || '新直播',
					cover: data.cover || '',
					introduction: data.introduction || '',
					reserveCount: 0,
					status: '未开始'
				};
				this.noticeList.unshift(newNotice);
				uni.showToast({
					title: '预告创建成功',
					icon: 'success'
				});
				this.showCreateModal = false;
				uni.setStorageSync('liveNotices', JSON.stringify(this.noticeList));
			},
			handleSend() {
				this.showPauseend = true;
			},

			confirmEnd() {
				this.showPauseend = false;
				this.showEndStats = true;
			},

			pauseLive() {
				this.showMoreModal = false;
				this.showPauseModal = true;
			},

			confirmPause() {
				this.showPauseModal = false;
				this.isLivePaused = true;
				this.startCountdown();
			},

			startCountdown() {
				this.remainingTime = 300;
				this.updateCountdownText();

				this.countdownTimer = setInterval(() => {
					this.remainingTime--;
					this.updateCountdownText();

					if (this.remainingTime <= 0) {
						this.stopLive();
					}
				}, 1000);
			},

			updateCountdownText() {
				const minutes = Math.floor(this.remainingTime / 60);
				const seconds = this.remainingTime % 60;
				this.countdownText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
			},

			resumeLive() {
				clearInterval(this.countdownTimer);
				this.isLivePaused = false;
				uni.showToast({
					title: '直播已恢复',
					icon: 'none'
				});
			},

			stopLive() {
				clearInterval(this.countdownTimer);
				uni.showToast({
					title: '直播已自动结束',
					icon: 'none'
				});
				this.isLivePaused = false;
			},

			handleComment() {
				uni.showToast({
					title: '评论功能',
					icon: 'none'
				});
				this.showMoreModal = false;
			},

			flipCamera() {
				uni.showToast({
					title: '镜头翻转',
					icon: 'none'
				});
				this.showMoreModal = false;
			},

			changeQuality() {
				uni.showActionSheet({
					itemList: ['流畅', '标清', '高清'],
					success: (res) => {
						uni.showToast({
							title: `已切换至${['流畅', '标清', '高清'][res.tapIndex]}`,
							icon: 'none'
						});
					}
				});
				this.showMoreModal = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.chat-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #121212;
		position: relative;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: #1a1a1a;
		color: #ffffff;
		margin-top: 80rpx;

		.room-name {
			font-size: 16px;
			font-weight: 600;
		}

		.viewer-count {
			font-size: 14px;
			color: #cccccc;
		}
	}

	.message-list {
		flex: 1;
		padding: 16px;
		overflow: auto;
		margin-top: 30vh;
	}

	.message-wrap {
		margin-bottom: 20px;
		display: flex;

		&.user-msg {
			justify-content: flex-start;

			.message-bubble {
				background-color: #007aff;
				color: #ffffff;
			}
		}

		&.other-msg {
			justify-content: flex-start;

			.message-bubble {
				background-color: #333333;
				color: #ffffff;
			}
		}
	}

	.message-bubble {
		max-width: 70%;
		padding: 10px 14px;
		border-radius: 16px;
		font-size: 14px;
		line-height: 1.4;
		word-wrap: break-word;
	}

	.input-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 12px 16px;
		background-color: #1a1a1a;
		border-top: 1px solid #333333;

		.func-buttons {
			display: flex;
			margin-right: 10px;

			.func-btn {
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				margin-left: 8px;
				background: transparent;
				color: #ffffff;
				font-size: 14px;
				border-radius: 15px;
			}
		}

		.send-btn {
			height: 36px;
			line-height: 36px;
			padding: 0 16px;
			color: red;
			border-radius: 18px;
			font-size: 14px;
			margin-left: 10px;
		}
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 999;
	}

	.modal-content {
		width: 100%;
		background-color: white;
		border-radius: 16px 16px 0 0;
		padding: 20px;
		box-sizing: border-box;
	}

	.modal-title {
		color: black;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.modal-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #000;
		justify-content: center;
	}

	.grid-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.grid-text {
		color: black;
		font-weight: 700;
		font-size: 12px;
		text-align: center;
	}

	.center-confirm-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.center-confirm-content {
		width: 80%;
		max-width: 300px;
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		box-sizing: border-box;
	}

	.center-confirm-title {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 15px;
		color: #000;
	}

	.center-confirm-text {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin-bottom: 20px;
		line-height: 1.5;
	}

	.center-confirm-buttons {
		display: flex;
		justify-content: space-between;
	}

	.center-confirm-btn {
		flex: 1;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		font-size: 16px;
		margin: 0 5px;
	}

	.center-cancel-btn {
		background-color: #f0f0f0;
		color: #333;
	}

	.center-ok-btn {
		background-color: #007aff;
		color: #fff;
	}

	.pause-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1001;
	}

	.pause-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		max-width: 300px;
		border-radius: 16px;
		padding: 30px 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.pause-text {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20px;
	}

	.countdown {
		font-size: 36px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 10px;
		font-family: monospace;
	}

	.hint-text {
		font-size: 14px;
		color: #fff;
		margin-bottom: 25px;
		text-align: center;
	}

	.resume-btn {
		width: 80%;
		height: 44px;
		line-height: 44px;
		background-color: #007aff;
		color: white;
		border-radius: 22px;
		font-size: 16px;
		border: none;
	}

	/* 新增的直播结束统计样式 */
	.end-live-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1002;
	}

	.blur-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.stats-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		box-sizing: border-box;
		color: #fff;
	}

	.stats-header {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #007aff;
	}

	.stats-duration {
		font-size: 16px;
		color: #ccc;
		margin-bottom: 100rpx;
	}

	.stats-grid {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(5, 1fr);
		gap: 30rpx;
		width: 100%;
		padding: 20rpx;
		margin-bottom: 30px;
		background-color: rgba(102, 102, 102, 0.5);
		border-radius: 20rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gang {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.5);
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.stat-label {
		font-size: 18rpx;
		color: #ccc;
	}

	.action-buttons {
		background-color: rgba(102, 102, 102, 0.5);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		width: 100%;
		margin-bottom: 30px;
	}

	.action-btn {
		display: flex;
		align-items: center;
		font-size: 16px;
		margin-bottom: 10rpx;
	}

	.preview-btn {
		background-color: transparent;
		color: #fff;
	}

	.create-btn {
		margin: 20rpx 0;
		background-color: rgb(255, 255, 255);
		font-weight: 700;
		border-radius: 22rpx;
	}

	.footer-actions {
		width: 100%;
		max-width: 300px;
		text-align: center;
	}

	.footer-text {
		font-size: 14rpx;
		color: #ccc;

		display: block;
	}

	.replay-action {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.replay-text {
		font-size: 14px;
		color: #fff;
		margin: 0 10px;
	}

	.replay-switch {
		transform: scale(0.8);
	}

	.footer-hint {
		font-size: 12px;
		color: #999;
	}
</style>